<template>
  <div>
    <div v-show="!(isShowDetail || isShowAdd)">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="账号:" prop="telphone">
            <el-input v-model.trim="searchInfo.telphone" clearable @keyup.enter.native="enterNextInput('userName')" ref="input-telphone"></el-input>
          </el-form-item>
          <el-form-item label="名称:" prop="userName">
            <el-input v-model.trim="searchInfo.userName" clearable @keyup.enter.native="enterNextInput('parentName')" ref="input-userName"></el-input>
          </el-form-item>
          <el-form-item label="上级名称:" prop="parentName">
            <el-input v-model.trim="searchInfo.parentName" clearable @keyup.enter.native="onSearch" ref="input-parentName"></el-input>
          </el-form-item>
          <el-form-item label="账号状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div v-if="userType">
            <el-button type="primary" @click="addSaleman">新增</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="subsidiaryList">
            <div>{{subsidiaryList.row.status === 0 ? "禁用" : "启用"}}</div>
          </template>
          <template slot="operation" slot-scope="subsidiaryList">
            <el-button type="text" @click="watchDetail(subsidiaryList.row.id)">查看详情</el-button>
            <el-button type="text" @click="freeze(subsidiaryList.row.id)" v-if="subsidiaryList.row.status === 1">禁用</el-button>
            <el-button type="text" @click="unFreeze(subsidiaryList.row.id)" v-if="subsidiaryList.row.status === 0">启用</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <SalemanDetail v-if="isShowDetail" :dataInfo="dataInfo" @goBack="goBack" @fresh="fresh"></SalemanDetail>
    <AddSaleman v-if="isShowAdd" @goBack="goBack" @fresh="fresh"></AddSaleman>
  </div>
</template>
<script>
  import SalemanDetail from './components/SalemanDetail'
  import AddSaleman from './components/AddSaleman'
  export default {
    name: "SalesmanList",
    components: { SalemanDetail, AddSaleman },
    data() {
      return {
        title: "业务员列表",
        isShowDetail: false,
        searchInfo: {},
        userType: JSON.parse(window.localStorage.adminLogin).userType == '2' ? true : false,
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '2',
              label: '账号',
              width: "120",
              prop: 'telphone'
            },
            {
              id: '3',
              label: '名称',
              prop: 'userName'
            },
            {
              id: '4',
              minWidth: '100',
              label: '所属子公司',
              prop: 'parentName'
            },
            {
              id: '5',
              label: '联系电话',
              width: "120",
              prop: 'contact'
            },
            {
              id: '6',
              label: '账号状态',
              show: 'template',
              prop: 'status'
            },
            {
              id: '7',
              label: '操作',
              show: 'template',
              fixed: "right",
              width: "160",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        isShowAdd: false,
        pageTotal:40,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      fresh() {
        this.getData()
      },

      addSaleman() {
        this.isShowAdd = true;
      },

      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.post(apis.architecture.getSalesmanList, data).then(result => {
          if(result.code === "10000000") {
            this.dataTable.data = result.data.dataList;
            this.pageTotal = result.data.total;
          } else {
            this.$message.error(result.message)
          }
          this.dataTable.loading = false;
        })
      },

      refreshPage() {
        this.currentPage = 1;
        this.resetForm('searchInfo')
        this.onSearch()
      },

      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },

      onSearch() {
        this.currentPage = 1;
        this.getData()
      },

      // 冻结
      freeze(id) {
        let data = {
          userId: id,
          status: 0
        };
        this.$confirm('此操作将禁用该账户, 是否继续?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(apis.architecture.changeUserStatus, data).then(res => {
            if(res.code === '10000000') {
              this.$message({
                type: 'success',
                message: '禁用成功!'
              });
              this.getData()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      unFreeze(id) {
        let data = {
          userId: id,
          status: 1
        }
        this.$confirm('此操作将启用该账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(apis.architecture.changeUserStatus, data).then(res => {
            if(res.code === '10000000') {
              this.$message({
                type: 'success',
                message: '启用成功!'
              });
              this.getData()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      resetForm(forName) {
        this.$refs[forName].resetFields();
      },

      watchDetail(id) {
        let data = {
          userId: id,
        }
        ajax.get(apis.architecture.getDetails, data).then(result => {
          if(result.code === "10000000") {
            this.dataInfo = {
              id: result.data.id,
              telphone: result.data.telphone,
              status: result.data.status,
              basicInfo: [{
                label: "账号",
                value: result.data.telphone
              }, {
                label: "名称",
                value: result.data.userName
              }, {
                label: "上级名称",
                value: result.data.parentName
              }, {
                label: "联系电话",
                value: result.data.contact
              }, {
                label: "联系地址",
                value: result.data.detailAdress
              }, {
                label: "账号状态",
                type: "status",
                value: result.data.status
              }],
              additionalInfo: [{
                label: "真实姓名",
                value: result.data.ownerName
              }, {
                label: "身份证号",
                value: result.data.idCardNo,
                type: "idCard"
              }, {
                label: "银行卡号",
                value: result.data.cardNo,
                type: "cardNo"
              }, {
                label: "所属银行",
                value: result.data.bankName
              }]
            };
            this.isShowDetail = true;
          } else {
            this.$message.error(result.message)
          }
        })
      },

      goBack() {
        this.isShowDetail = false;
        this.isShowAdd = false;
      },

      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo;
        this.getData()
      },

      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo;
        this.getData()
      }
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style lang="scss" scoped>

</style>
